<template>
  <el-menu :default-active="route.path" router class="el-menu-demo" mode="horizontal" :ellipsis="false"
    background-color="#0c4270" active-text-color="#93c8ff" text-color="#fff">
    <el-menu-item>
      <div class="headerTitle">CHONGQING MEDICAL UNIVERS</div>
    </el-menu-item>
    <div class="menuList">
      <div class="menuItem" v-for="item in menuList" :key="item.key">
        <el-sub-menu v-if="item.children?.length > 0" :index="item.path">
          <template #title>{{ item.menuName }}</template>
          <el-menu-item v-for="childrenItem in item.children" :key="childrenItem.key" :index="childrenItem.path"
            @click="toPath(childrenItem.path)">
            {{ childrenItem.menuName }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="toPath(item.path)">
          {{ item.menuName }}
        </el-menu-item>
      </div>
    </div>
  </el-menu>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const menuList = [
  {
    path: "/",
    menuName: "Home",
    key: "home",
  },
  {
    path: "/search",
    menuName: "Search",
    key: "search",
    children: [
      {
        path: "/search/bacteria",
        menuName: "Bacteria",
        key: "bacteria",
      },
      {
        path: "/search/viruses",
        menuName: "Viruses",
        key: "viruses",
      },
      {
        path: "/search/fungi",
        menuName: "Fungi",
        key: "fungi",
      },
    ],
  },
  {
    path: "/dataBrowse",
    menuName: "Data-Browse",
    key: "dataBrowse",
  },
  {
    path: "/genomeBrowser",
    menuName: "Genome-Browser",
    key: "genomeBrowser",
  },
  {
    path: "/download",
    menuName: "Download",
    key: "download",
  },
];

const toPath = (path) => {
  router.push(path).catch((err) => {
    if (err.name !== "NavigationDuplicated") {
      console.error("Navigation error:", err);
    }
  });
};
</script>

<style lang="scss" scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

::v-deep .menuItem .el-menu-item {
  font-size: 40px !important;
}

.headerTitle {
  font-weight: 600;
  font-size: 18px;
  min-width: 400px;
}

.menuList {
  display: flex;
}

.el-menu-demo {
  display: flex;
  flex-wrap: wrap;
  font-family: system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    "Noto Sans",
    "Liberation Sans",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji" !important;
  ;
}


@media (max-width: 1100px) {
  .menuList {
    background: red;
  }

  .el-menu-demo {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
